<template>
	<view class="item" @click="itemHandle">
		<view class="img">
			<image :src="item.pic" mode=""></image>
		</view>
		<view class="name">
			{{ item.name || item.goodsName }}
		</view>
		<view class="price">
			<text class="highlight">¥{{ item.price || item.groupPrice }}</text>
			<text class="lowlight" v-if="item.originalPrice || item.originPrice">¥{{ item.originalPrice || item.originPrice }}</text>
		</view>
	</view>
</template>

<script>
export default {
	name: 'item',
	props: ["item", "from"],
	methods: {
		itemHandle() {
			var id = this.item.goodsId || this.item.id;
            var { smsGroupId, pmsProductSkuId} = this.item;
            if(smsGroupId && pmsProductSkuId) {
                uni.navigateTo({
                	url: `/pages/langwen/detail?id=${id}&smsGroupId=${smsGroupId}&pmsProductSkuId=${pmsProductSkuId}`
                });
            }else {
                uni.navigateTo({
                	url: `/pages/langwen/detail?id=${id}`
                });
            }
		}
	}
}
</script>

<style lang="less">
.item {
	width: 33.3%;
	text-align: left;
	margin: 30rpx 0;
	.img {
		width:160rpx;
		height:107px;
		margin: 0 auto 5px auto;
	}
	.name {
		width: 80px;
		font-size:24rpx;
		font-weight:400;
		color:rgba(51,51,51,1);
		line-height:36rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		margin: 0 auto;
	}
	.price {
		width: 80px;
		margin: 10rpx auto auto;
		font-size:24rpx;
		font-weight:600;
		.highlight {
			color:rgba(255,101,24,1);
		}
		.lowlight {
			color:rgba(191,191,191,1);
			text-decoration: line-through;
			margin-left: 10rpx;
		}
	}
}
</style>
